<template>
	<view class="box">
		<view class="user">
			<view class="userinfo">
				<view class="img">
					<img src="/static/images/点亮王冠.png" alt="" class="img_user" />
				</view>
				<view class="username">
					<view class="name_box">
						用户昵称
					</view>
					<view class="shiming">
						未实名
					</view>
				</view>
				<view class="more">
					<view class="real_name">
						实名认证
					</view>
					<view class="">
						>
					</view>
				</view>
				
			</view>
		</view>
		<view class="myjob">
			<view class="job_top">
				<view class="message">
					我的兼职
				</view>
			</view>
			<view class="wary">
				<uni-grid :column="3" :show-border="false" :square="false" @change="change">
					<uni-grid-item v-for="(item ,index) in list1" :index="index" :key="index">
						<view class="grid-item-box"  @click="minejob()">
							<image class="image" :src="item.url" mode="aspectFill" />
							<text class="text">{{item.text}}</text>
							<view v-if="item.badge" class="grid-dot">
								<uni-badge :text="item.badge" :type="item.type" />
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<view class="common_function">
			<view class="common_top">
				<view class="message">
					常用功能
				</view>
			</view>
			<view class="wary1">
				<uni-grid :column="3" :highlight="true" @change="change" :showBorder="false">
					<uni-grid-item v-for="(item, index) in 5" :index="index" :key="index">
						<view class="grid-item-box" style="background-color: #fff;">
							<uni-icons type="image" :size="30" color="#777" />
							<text class="text">文本信息</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<view class="recruit">
			<uni-list-item title="我要招人" note="海量真实简历任你挑" thumb="/static/images/小牛牛.png" thumb-size="lg"
				rightText="发布职位" />
		</view>
		<view class="advertisement">
			<view class="ad_box">
				<uni-list-item title="列表左侧" note="列表描述信息"
					thumb="/static/images/小牛牛.png" thumb-size="lg"
					 />
			</view>
			<view class="ad_box">
				<uni-list-item title="列表左侧" note="列表描述信息"
					thumb="/static/images/小牛牛.png" thumb-size="lg"
					 />
			</view>
		</view>
		<view class="common_function">
			<view class="common_top">
				<view class="message">
					其他功能
				</view>
			</view>
			<view class="wary1">
				<uni-grid :column="3" :highlight="true" @change="change" :showBorder="false">
					<uni-grid-item v-for="(item, index) in 3" :index="index" :key="index">
						<view class="grid-item-box" style="background-color: #fff;">
							<uni-icons type="image" :size="30" color="#777" />
							<text class="text">文本信息</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<view class="bottom_box">
			已经到底了~
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				dynamicList: [],
				list: [{
						url: '/static/c1.png',
						text: 'Grid 1',
						badge: '0',
						type: "primary"
					},
					{
						url: '/static/c2.png',
						text: 'Grid 2',
						badge: '1',
						type: "success"
					},
					{
						url: '/static/c3.png',
						text: 'Grid 3',
						badge: '99',
						type: "warning"
					},
					{
						url: '/static/c4.png',
						text: 'Grid 4',
						badge: '2',
						type: "error"
					},
					{
						url: '/static/c5.png',
						text: 'Grid 5'
					},
					{
						url: '/static/c6.png',
						text: 'Grid 6'
					},
					{
						url: '/static/c7.png',
						text: 'Grid 7'
					},
					{
						url: '/static/c8.png',
						text: 'Grid 8'
					},
					{
						url: '/static/c9.png',
						text: 'Grid 9'
					}
				],
				list1: [{
						url: '/static/c1.png',
						text: 'Grid 1',
						badge: '0',
						type: "primary"
					},
					{
						url: '/static/c2.png',
						text: 'Grid 2',
						badge: '1',
						type: "success"
					},
					{
						url: '/static/c3.png',
						text: 'Grid 3',
						badge: '99',
						type: "warning"
					},

				]
			}
		},
		onload() {
			// uni.setStorageSync('storage_key1', '我的兼职');
		},
		methods: {
			minejob(){
				uni.navigateTo({
					url: "/pagesmine/minejob/minejob?name=我的兼职"
				});
			}
		}
	}
</script>

<style lang="scss">
	.image {
		width: 25px;
		height: 25px;
	}

	.message {
		font-size: 12px;
		padding-bottom: 10px;
	}

	.text {
		font-size: 12px;
		margin-top: 5px;
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px 0;
	}

	.grid-item-box-row {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 10px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	.box {
		background-color: #e4dddd;
		width: 100%;
		height: 100%;
		.bottom_box{
			height: 50px;
			display: flex;
			align-items: center;
			margin-bottom: 50px;
			justify-content: center;
			color: #a4a4a4;
		}
		.recruit {
			width: 95%;
			height: 11%;
			background-color: #fff !important;
			margin: 5px;
			padding: 0px 5px 0px 5px;
			padding-top: 0px;
			border-radius: 5px;
		}
		.advertisement{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 5px;
				padding: 0px 5px 0px 5px;
			.ad_box{
				width: 180px;
			}
		}
		.user {
			width: 100%;
			height: 22%;
			margin-top: 0px;
			margin-bottom: 20px;
			margin-left: 5px;
			margin-right: 5px;
			padding-top: 100px;
			padding-left: 5px;
			padding-right: 5px;

			.userinfo {
				display: flex;
				align-items: center;
				width: 100%;
				.name_box{
					font-size: 15px;
				}
				.shiming{
					font-size: 16rpx;
					background-color: #fff;
					line-height: 30rpx;
					text-align: center;
					width: 80rpx;
					height: 30rpx;
					border: 10rpx;
					border-radius: 5px;
				}
				
				.img_user {
					width: 50px;
					height: 50px;
					border: 50%;
					margin-right: 10px;
				}
				.more {
					position: absolute;
					right: 0px;
					color: #a4a4a4;
					transform: scale(0.8);
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.real_name{
						width: 150rpx;
						height: 30rpx;
						background-color: #fff;
						text-align: center;
						line-height: 30rpx;
						font-size: 12px;
						color: #000;
						border-radius: 10rpx;
					}
					
				}
			}
		}

		.common_function {
			width: 95%;
			height: 11%;
			background-color: #fff !important;
			margin: 5px;
			padding: 5px;
			border-radius: 5px;

			.common_top {
				display: flex;
				align-items: center;
			}
		}

		.myjob {
			width: 95%;
			height: 11%;
			background-color: #fff !important;
			margin: 5px;
			padding: 5px;
			margin-top: 20px;
			border-radius: 5px;

			.job_top {
				display: flex;
				align-items: center;

				.more_two {
					position: absolute;
					right: 20px;
					transform: scale(0.8);
					color: #a4a4a4;
				}
			}
		}
	}
</style>